import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import vueParser from 'vue-eslint-parser'
import prettier from 'eslint-plugin-prettier'
import typescriptParser from '@typescript-eslint/parser'
import eslintConfigPrettier from 'eslint-config-prettier'
import importSort from 'eslint-plugin-simple-import-sort'
import typescriptPlugin from '@typescript-eslint/eslint-plugin'

export default [
  {
    ignores: ['node_modules/*', 'dist/*', '**/**/*.d.ts', '**/*.d.ts', '**/*.js', '**/*.mjs', '**/*.cjs', '/template/*'],
    files: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue', 'src/**/*.js', 'src/**/*.jsx', 'src/**/*.cjs'],
  },
  {
    plugins: {
      '@typescript-eslint': typescriptPlugin,
      prettier,
      'simple-import-sort': importSort,
    },
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        extraFileExtensions: ['.vue'],
      },
    },
  },
  pluginJs.configs.recommended,
  eslintConfigPrettier,
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: typescriptParser,
        sourceType: 'module',
        jsx: true,
      },
    },
  },
  {
    rules: {
      'no-undef': 'off',
      '@typescript-eslint/no-unused-vars': ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: false, argsIgnorePattern: '^_' }],
      'no-unused-vars': 'off',

      // 禁止使用 any 类型
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-unreachable': 'off', // 禁止无法到达的代码

      // Import 排序规则
      'simple-import-sort/exports': 'error',
      // Vue 组件规则
      'vue/multi-word-component-names': 'off', // 已有文件可能不符合，暂时关闭
      'vue/max-attributes-per-line': 'off',
      'vue/singleline-html-element-content-newline': 'off',
      'vue/html-closing-bracket-newline': 'off',

      // Vue 组件名称规范
      'vue/component-definition-name-casing': ['error', 'PascalCase'],

      // Vue 属性命名规范
      'vue/prop-name-casing': ['error', 'camelCase'],

      // Vue 事件命名规范
      'vue/custom-event-name-casing': ['error', 'camelCase'],

      // Vue 指令使用 kebab-case
      'vue/attribute-hyphenation': ['error', 'always'],

      // Vue 模板中的 v-on 事件使用 kebab-case
      'vue/v-on-event-hyphenation': ['error', 'always'],
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'always',
            normal: 'always',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],

      // Vue 属性排序规则 - 静态属性 -> 动态绑定 -> 事件
      'vue/attributes-order': [
        'error',
        {
          order: [
            'DEFINITION', // 'is', 'v-is'
            'LIST_RENDERING', // 'v-for item in items'
            'CONDITIONALS', // 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
            'RENDER_MODIFIERS', // 'v-once', 'v-pre'
            'GLOBAL', // 'id', 'class' (静态)
            'UNIQUE', // 'ref', 'key'
            'OTHER_ATTR', // 静态属性如 'custom-prop="foo"'
            'TWO_WAY_BINDING', // 'v-model'
            'OTHER_DIRECTIVES', // 'v-custom-directive'
            'EVENTS', // '@click="functionCall"', 'v-on="event"'
            'CONTENT', // 'v-text', 'v-html'
          ],
          alphabetical: false,
        },
      ],
    },
  },
]
